<template>
    <view class="upload width_popup">
        <uni-popup :show="show" type="center" @change="change">
            <view class="popub_box">
                <image src="/static/img/chenggong@2x.png" class="img_01"></image>
                <view class="title font-regular">{{title}}</view>
                <view class="des font-light">{{desc}}</view>
                <view class="share">
                    <view class="share_l">
                        <!--<image src="/static/img/weixin@2x.png" class="img_02"></image>-->
                        <button open-type="share" style="background:none;background-image:url('https://listen-book.oss-cn-beijing.aliyuncs.com/icon/weixin%402x.png');background-size: 100%;border: none" class="img_02" type="text"></button>
                        <view class="name font-regular">微信好友</view>
                    </view>
                    <view class="share_l" @click="shareMoment">
                        <image src="/static/img/pyq@2x.png" class="img_02"></image>
                        <view class="name font-regular">朋友圈</view>
                    </view>
                </view>
            </view>
        </uni-popup>

        <!--        保存图片分享-->
        <record-poster :show="dialog_poster" @cancel="dialog_poster=false"  :sharePost="sharePost" ></record-poster>
    </view>
</template>

<script>

  import {uniSwiperDot, uniPopup} from "@dcloudio/uni-ui"

  import RecordPoster from "./poster"
  import Request from '@/utils/request.js'

  export default {
    components: {uniPopup,RecordPoster},
    name: "recordShare",
    props: {
      'show': {
        type: Boolean,
        defalut: true,
      },
      'record_id': {
        type: Number,
      },
      'subject_id': {
        type: Number,
      },
      'desc': {
        type: String,
        defalut: '读的很棒哦！分享给大家听吧～',
      },
      'title': {
        type: String,
        defalut: '作品上传成功',
      },
    },
    created: function () {

    },
    methods: {

      shareMoment(){
        this.shareMoment();
      },
      cancel: function () {
        this.$emit('cancel');
      },
      save: function () {
        this.$emit('submit', {content: this.content});
      },
      change: function (data) {
        if(data.show===false){
          this.cancel()
        }
      },

      shareMoment() {
        uni.showLoading()
        Request.post('/tape/record/picture', {
          'page': 'pages/index/index',
          'scene' :  this.record_id,
          'tape_id': this.subject_id,
        }).then((res) => {
          this.sharePost = res.data.file
          console.log(this.sharePost);
          this.dialog_poster = true;
          uni.hideLoading();
        })

      },
    },

    data() {
      return {
        dialog_poster: false,
        sharePost:'',
        content: '',
      }
    }
  }
</script>

<style lang="scss">

    button:after {
        border: none;
    }
    .upload {
        .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
            top: -150upx;
            width: 500upx;
            height: 500upx;
            border-radius: 20upx;
            overflow: hidden;
            position: relative;
        }
        .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
            padding: 0upx;
        }
        .popub_box {
            box-sizing: border-box;
            padding: 50upx 0 30upx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .title {
                font-size: $uni-font-size-base;
                color: $uni-color-664e37;
                line-height: 40upx;
                padding-top: 30upx;
            }
            .des {
                font-size: $uni-font-size-13;
                color: $uni-color-664e37;
                line-height: 40upx;
                padding-bottom: 66upx;
                opacity: 0.8;
            }
            .img_01 {
                width: 100upx;
                height: 100upx;
            }
            .share {
                width: 100%;
                box-sizing: border-box;
                padding: 0 100upx;
                display: flex;
                justify-content: space-between;
                .share_l {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .name {
                        font-size: $uni-font-size-13;
                        color: $uni-color-664e37;
                        opacity: 0.8;
                        line-height: 40upx;
                        padding-top: 12upx;
                    }
                    .img_02 {
                        width: 90upx;
                        height: 90upx;
                    }
                }
            }
        }
    }
</style>
